<template>
	<view>
		<navbar></navbar>
		<!-- #ifndef MP -->
		<view class="register-container">
			<view class="logo-box">
				<view class="img"></view>
				<!-- <view class="name">{{ appName }}</view> -->
			</view>
			<view class="register-box">
				<view v-if="step == 1">
					<view class="form-item">
						<view class="label">手机号</view>
						<view class="form-input">
							<input v-model="mobile" type="number" placeholder="请输入手机号" />
						</view>
					</view>
					<view class="form-item">
						<view class="label">验证码</view>
						<view class="form-input">
							<input v-model="validate" placeholder="请输入验证码" maxlength="6" />
							<send-code :mobile="mobile" ref="sendCode" @checkphone="checkPhone"></send-code>
						</view>
					</view>
				</view>
				<view v-if="step == 2">
					<view class="form-item">
						<view class="label">密码</view>
						<view class="form-input">
							<input v-if="showPwd" v-model="pwd" type="text" placeholder="请输入新密码(至少8位且含字母/数字)" />
							<input v-else v-model="pwd" type="password" placeholder="请输入新密码(至少8位且含字母/数字)" />
							<view class="pwd-eye" @click="changePwdVisible('showPwd')"><i class="dy-iconfont"
									:class="[{'icon-show':showPwd},{'icon-hide':!showPwd}]"></i></view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">确认密码</view>
						<view class="form-input">
							<input v-if="showConfirmPwd" v-model="confirmPwd" type="text" placeholder="再次确认密码" />
							<input v-else v-model="confirmPwd" type="password" placeholder="再次确认密码" />
							<view class="pwd-eye" @click="changePwdVisible('showConfirmPwd')"><i class="dy-iconfont"
									:class="[{'icon-show':showConfirmPwd},{'icon-hide':!showConfirmPwd}]"></i></view>
						</view>
					</view>
				</view>
			</view>
			<button v-if="step == 1" class="register-btn" @click="submit()" style="color: #fff;"
				:disabled="!mobile || !validate">下一步</button>
			<button v-else class="register-btn" @click="submit()" :disabled="!pwd || !confirmPwd">确认</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import siteinfo from '@/siteinfo.js';
	// #ifndef MP
	import {
		isPhone,
		isPwd,
		isPositiveInteger
	} from "@/utils/verify.js"
	import navbar from "@/components/navbar/navbar";
	const app = getApp();
	export default {
		components: {
			navbar
		},
		data() {
			return {
				showPwd: false, //密码是否明文
				showConfirmPwd: false, //确认密码是否明文

				mobile: '',
				validate: '',
				pwd: '',
				confirmPwd: '',

				step: 1, //步骤
				isWx: app.globalData.isWx,
				appName: siteinfo.name,
			}
		},
		onLoad() {},
		methods: {
			// 校验表单数据
			validateData() {
				if (this.mobile == "") {
					app.showToast('请输入手机号');
					return false;
				}
				if (!isPhone(this.mobile)) {
					app.showToast('手机号格式不正确');
					return false;
				}
				if (this.validate == "") {
					app.showToast('请输入验证码');
					return false;
				}
				if (!isPositiveInteger(this.validate)) {
					app.showToast('验证码不正确');
					return false;
				}

				// 第一步校验到此为止
				if (this.step == 1) {
					return true;
				}

				if (this.pwd == "") {
					app.showToast('请输入密码');
					return false;
				}
				if (!isPwd(this.pwd)) {
					app.showToast('密码格式不正确');
					return false;
				}
				if (this.confirmPwd == "") {
					app.showToast('请输入确认密码');
					return false;
				}
				if (this.confirmPwd !== this.pwd) {
					app.showToast('两次密码输入不一致');
					return false;
				}
				return true;
			},
			changePwdVisible(name) {
				this[name] = !this[name];
			},
			/**
			 * 授权成功 跳转回原页面
			 */
			onNavigateBack() {
				app.navigationBack();
			},
			/**
			 * 发送验证码前校验手机号
			 */
			checkPhone() {
				if (!isPhone(this.mobile)) {
					app.showToast('手机号格式不正确');
					return;
				}
				let params = {
					phone: this.mobile,
				}
				app._get('user/checkPhoneRegister', params, res => { // success
					// "has_reg": 0   //0:未注册 1:已注册
					let hasReg = res.data.has_reg;
					if (hasReg == 0) {
						app.showToast('该手机号未注册！');
					} else {
						this.$refs.sendCode.checkPhoneOk();
					}
				}, false, () => { //complete
					uni.hideLoading();
				});
			},

			//当前步骤提交数据
			submit() {
				var valid = this.validateData();

				// 校验不通过
				if (!valid) {
					return false;
				}

				let params = {
					from: 'h5',
					is_wx: 0,
					nickName: this.mobile,
					smscode: this.validate,
					wxapp_id: app.globalData.wxapp_id,
					step: this.step // 校验步骤
				}

				// 第二步需要校验密码
				if (this.step == 2) {
					params.password = this.pwd; //密码
					params.confirmPassword = this.confirmPwd; //确认密码
				}

				let user_id = app.getUserId();
				if (user_id) {
					params['user_id'] = user_id;
				}

				app._post_form('user/reset', params, result => {
					// 第一步成功后到第二步
					if (this.step == 1) {
						this.step = 2;
						return;
					}

					// 第二步成功后跳转登录
					app.showSuccess('密码重置成功', this.goLogin);

				}, false, () => {
					uni.hideLoading();
				});
			},
			// 跳转到登录页面
			goLogin() {
				let lastPage = app.lastPage()
				//判断上一页是否是登录页面，否则直接跳转到登录页
				if (lastPage && lastPage.route.indexOf("pages/login/login") == 0) {
					this.onNavigateBack();
				} else {
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}
			}
		}
	}
	// #endif
</script>

<style lang="scss" scoped>
	@import '../../utils/login.scss';
	.pages-login-findPwd{
		background-color: #fff;
	}
</style>
